<template>
  <div class="com-event" v-if="item != {}">
    <div class="com-event-hd">
      <div class="com-event-left">
        <a href="javascript:;" @click="clickUser(item.user.userId)">
          <img
            v-if="item.user"
            :src="item.user.avatarUrl"
            :alt="item.user.nickname"
            class="com-event-hd-pic"
          />
        </a>
      </div>
      <div class="com-event-hd-main">
        <div class="com-event-user">
          <h4 class="com-event-user-name">
            <a href="javascript:;" @click="clickUser(item.user.userId)">
              {{ item.user.nickname }}
            </a>
          </h4>
          <span class="com-event-user-icon" v-if="item.user.avatarDetail">
            <img :src="item.user.avatarDetail.identityIconUrl" alt="" />
          </span>
          <span class="com-event-type" v-if="item.type">{{ eventType }}</span>
        </div>
        <span class="com-event-time">
          {{ item.eventTime | showDate }}
        </span>
      </div>
    </div>
    <div class="com-event-main">
      <div class="com-event-main-text" ref="eventText"></div>
      <!-- event-song -->
      <div class="com-event-main-song" v-if="showSong">
        <div class="cem-song-left">
          <a href="javascript:;" @click="clickPlay(song)">
            <i class="cem-song-cover-icon"></i>
            <img
              :src="song.album.picUrl"
              :alt="song.name"
              class="cem-song-pic"
            />
          </a>
        </div>
        <div class="cem-song-main">
          <h4 class="cem-song-name">
            <a href="javascript:;" @click="clickSong(song.id)">
              {{ song.name }}
            </a>
          </h4>
          <h4 class="cem-song-artist">
            <a
              v-for="(art, n) in song.artists"
              :key="art.id"
              href="javascript:;"
              @click="clickArtist(art.id)"
              :title="art.name"
            >
              <i v-if="n > 0"> / </i>
              {{ art.name }}
            </a>
          </h4>
        </div>
      </div>
      <!-- event-artist -->
      <div class="com-event-main-artist" v-if="showArtist">
        <div class="cem-artist-left">
          <a href="javascript:;" @click="clickArtist(artist.id)">
            <img
              :src="artist.img1v1Url"
              :alt="artist.name"
              class="cem-artist-pic"
            />
          </a>
        </div>
        <div class="cem-artist-main">
          <h4 class="cem-artist-name">
            歌手：
            <a href="javascript:;" @click="clickArtist(artist.id)">
              {{ artist.name }}
            </a>
            <span class="cem-artist-name-trans" v-if="artist.trans">
              {{ artist.trans }}
            </span>
          </h4>
        </div>
      </div>
      <!-- event-program -->
      <div class="com-event-main-song" v-if="showProgram">
        <div class="cem-song-left">
          <a href="javascript:;" @click="clickProgram">
            <i class="cem-song-cover-icon"></i>
            <img
              :src="program.coverUrl"
              :alt="program.name"
              class="cem-song-pic"
            />
          </a>
        </div>
        <div class="cem-song-main">
          <h4 class="cem-song-name">
            <a href="javascript:;" @click="clickProgram">
              {{ program.name }}
            </a>
          </h4>
          <h4 class="cem-song-artist">
            <span class="cem-program-category">
              {{ program.radio.category }}
            </span>
            <a
              href="javascript:;"
              @click="clickProgram"
              :title="program.radio.name"
            >
              {{ program.radio.name }}
            </a>
          </h4>
        </div>
      </div>
      <!-- event-mv -->
      <div class="com-event-main-mv" v-if="showMv">
        <div class="cem-mv-show" v-if="!mvPlay">
          <div class="cem-mv-show-hd">
            <i class="iconfont">&#xe605;</i>
            <span class="cem-mv-name">{{ mv.name }}</span>
            <span class="cem-mv-artists">
              -
              <span>
                <a
                  v-for="(art, n) in mv.artists"
                  :key="art.id"
                  href="javascript:;"
                  @click="clickArtist(art.id)"
                  :title="art.name"
                >
                  <i v-if="n > 0"> / </i>
                  {{ art.name }}
                </a>
              </span>
            </span>
          </div>
          <div class="cem-mv-playcount">
            <i class="iconfont">&#xe8ca;</i>
            {{ mv.playCount }}
          </div>
          <i class="cem-mv-play-icon" @click="mvPlay = !mvPlay"></i>
          <img :src="mv.imgurl16v9" :alt="mv.name" class="cem-mv-pic" />
        </div>
        <div class="cem-mv-box" v-if="mvPlay">
          <div class="cem-mv-box-hd">
            <i class="iconfont">&#xe616;</i>
            <span class="cem-mv-box-put" @click="mvPlay = !mvPlay">收起</span>
            <span class="line">|</span>
            <i class="iconfont">&#xec50;</i>
            <a href="javascript:;" class="cem-mv-link" @click="clickMv(mv.id)">
              {{ mv.name }}
            </a>
            <a
              class="cem-mv-artist"
              v-for="(art, n) in mv.artists"
              :key="art.id"
              href="javascript:;"
              @click="clickArtist(art.id)"
              :title="art.name"
            >
              <i v-if="n > 0"> / </i>
              {{ art.name }}
            </a>
          </div>
          <video-box
            :url="url"
            :brs="brs"
            :r="r"
            @boxChangeBr="getMvUrl"
          ></video-box>
        </div>
      </div>
      <!-- event-video -->
      <div class="com-event-main-mv" v-if="showVideo">
        <div class="cem-mv-show" v-if="!videoPlay">
          <div class="cem-mv-show-hd">
            <span class="cem-mv-name">{{ video.title }}</span>
          </div>
          <span class="cem-video-creator">
            - by
            <a
              href="javascript:;"
              @click="clickUser(video.creator.userId)"
              :title="video.creator.nickname"
            >
              {{ video.creator.nickname }}
            </a>
          </span>
          <span class="cem-mv-playcount">
            <i class="iconfont">&#xe8ca;</i>
            {{ video.playTime }}
          </span>
          <span class="cem-video-time">
            <i class="iconfont">&#xec51;</i>
            {{ video.durationms | changeTime }}
          </span>
          <i class="cem-mv-play-icon" @click="videoPlay = !videoPlay"></i>
          <img
            :src="video.coverUrl"
            :alt="video.description"
            class="cem-mv-pic"
          />
        </div>
        <div class="cem-mv-box" v-if="videoPlay">
          <div class="cem-mv-box-hd">
            <i class="iconfont">&#xe616;</i>
            <span class="cem-mv-box-put" @click="videoPlay = !videoPlay"
              >收起</span
            >
            <span class="line">|</span>
            <i class="iconfont">&#xec50;</i>
            <a
              href="javascript:;"
              class="cem-mv-link"
              @click="clickVideo(video.videoId)"
            >
              {{ video.title }}
            </a>
            <a
              class="cem-mv-artist"
              href="javascript:;"
              @click="clickUser(video.creator.userId)"
              :title="video.creator.nickname"
            >
              {{ video.creator.nickname }}
            </a>
          </div>
          <video-box
            :url="url"
            :brs="brs"
            :r="r"
            @boxChangeBr="getVideoUrl"
          ></video-box>
        </div>
      </div>
      <!-- event-playlist -->
      <div class="com-event-main-song" v-if="showPlaylist">
        <div class="cem-song-left">
          <a href="javascript:;" @click="playPlaylist(playlist.id)">
            <i class="cem-song-cover-icon"></i>
            <img
              :src="playlist.coverImgUrl"
              :alt="playlist.name"
              class="cem-song-pic"
            />
          </a>
        </div>
        <div class="cem-song-main">
          <h4 class="cem-song-name">
            <span class="cem-playlist-tab">歌单</span>
            <a href="javascript:;" @click="clickPlaylist(playlist.id)">
              {{ playlist.name }}
            </a>
          </h4>
          <h4 class="cem-playlist-artist">
            by
            <a
              href="javascript:;"
              @click="clickUser(playlist.creator.userId)"
              :title="playlist.creator.nickname"
            >
              {{ playlist.creator.nickname }}
            </a>
          </h4>
        </div>
      </div>
      <!-- event-album -->
      <div class="com-event-main-song" v-if="showAlbum">
        <div class="cem-song-left">
          <a href="javascript:;" @click="playAlbum(album.id)">
            <i class="cem-song-cover-icon"></i>
            <img :src="album.picUrl" :alt="album.name" class="cem-song-pic" />
          </a>
        </div>
        <div class="cem-song-main">
          <h4 class="cem-song-name">
            <span class="cem-playlist-tab">专辑</span>
            <a href="javascript:;" @click="clickAlbum(album.id)">
              {{ album.name }}
            </a>
          </h4>
          <h4 class="cem-playlist-artist">
            <a
              href="javascript:;"
              @click="clickUser(album.artist.id)"
              :title="album.artist.name"
            >
              {{ album.artist.name }}
            </a>
          </h4>
        </div>
      </div>
      <!-- event-pic -->
      <div class="com-event-main-pic" v-if="showPic">
        <div class="cem-pic-show" v-if="!showBigPic">
          <ul class="cem-pic-list clearfix">
            <li
              :class="[
                'cem-pic-item',
                {
                  'cem-pic-item-1': pics.length == 1,
                  'cem-pic-item-2': pics.length == 2 || pics.length == 4,
                  'cem-pic-item-3': pics.length == 3 || pics.length > 4,
                },
              ]"
              v-for="(item, index) in pics"
              :key="index"
              @click="clickPic(index)"
            >
              <img :src="item.originUrl" alt="" />
            </li>
          </ul>
        </div>
        <div class="cem-pic-box" v-if="showBigPic">
          <div class="cem-pic-box-hd">
            <i class="iconfont">&#xe616;</i>
            <span class="cem-pic-box-put" @click="showBigPic = false"
              >收起</span
            >
            <span class="line">|</span>
            <i class="iconfont">&#xec52;</i>
            <span class="cem-pic-oig">查看原图</span>
            <span class="line">|</span>
            <i class="iconfont">&#xe8a6;</i>
            <span class="cem-pic-down">下载</span>
          </div>
          <pic-box
            :pics="pics"
            :currentItem="current"
            @putBox="showBigPic = false"
          ></pic-box>
        </div>
      </div>
      <!-- event-count -->
      <div class="com-event-main-count">
        <a href="javascript:;" class="event--count">
          <i class="iconfont">&#xe8b0;</i>
          <span class="count-d" v-if="item.info.likedCount > 0">
            ({{ item.info.likedCount }})
          </span>
        </a>
        <span class="line">|</span>
        <a href="javascript:;" class="event-count">
          转发
          <span class="count-d" v-if="item.info.shareCount > 0">
            ({{ item.info.shareCount }})
          </span>
        </a>
        <span class="line">|</span>
        <a href="javascript:;" class="event-count">
          评论
          <span class="count-d" v-if="item.info.commentCount > 0">
            ({{ item.info.commentCount }})
          </span>
        </a>
      </div>
    </div>
    <div class="com-event-manage" v-if="showManage">
      <span class="manage-icon" @click="openManage = !openManage">
        <i class="el-icon-arrow-down"></i>
      </span>
      <ul class="manage-list clearfix" v-if="openManage">
        <li class="manage-item" @click="clickDel">
          <i class="iconfont">&#xe617;</i>
          删除
        </li>
      </ul>
    </div>
    <div class="delTip" id="delTip" v-if="showDelTip">
      <div class="my-del-tip" id="mdt">
        <h4 class="my-del-hd">
          提示
          <span class="close" @click="showDelTip = false">
            <i class="iconfont">&#xec47;</i>
            关闭
          </span>
        </h4>
        <div class="my-del-bd">
          <div class="my-del-cont">
            <p>是否要删除该动态?</p>
          </div>
          <div class="my-del-btn">
            <el-button type="primary" size="small" @click="sureDel"
              >确定</el-button
            >
            <el-button size="small" @click="showDelTip = false">取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <small-tip :tipMessage="smallTipMsg" v-if="showSmallTip"></small-tip>
  </div>
</template>

<script>
import { formatDate } from "common/date.js";
import { changeTime } from "common/time.js";
import VideoBox from "components/videobox/VideoBox";
import PicBox from "components/pic/PicBox";
import Tip from "components/tip/Tip";
import SmallTip from "components/tip/SmallTip";

export default {
  components: {
    VideoBox,
    PicBox,
    Tip,
    SmallTip,
  },
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    eventType: function () {
      let type = "";
      if (this.item.type) {
        switch (this.item.type) {
          case 13:
            type = "分享歌单";
            break;
          case 17:
            type = "分享电台节目";
            break;
          case 18:
            type = "分享单曲";
            break;
          case 19:
            type = "分享专辑曲";
            break;
          case 21:
            type = "分享MV";
            break;
          case 22:
            type = "转发";
            break;
          case 24:
            type = "分享专栏文章";
            break;
          case 28:
            type = "分享电台节目";
            break;
          // case 35:
          // type = "分享歌单";
          // break;
          case 36:
            type = "分享歌手";
            break;
          case 39:
            type = "发布视频";
            break;
          case 41:
            type = "分享视频";
            break;
          case 56:
            type = "分享网页";
        }
      }
      return type;
    },
  },
  filters: {
    changeTime(value) {
      return changeTime(value);
    },
    // 过滤器转换时间戳
    showDate(value) {
      let comTime = "";
      // 今年
      let y = new Date().getFullYear();
      // 发布年份
      let py = formatDate(new Date(value), "yyyy");
      let d = Math.floor((new Date().getTime() - value) / 1000 / 60 / 60 / 24);
      let h = Math.floor(
        ((new Date().getTime() - value) / 1000 / 60 / 60) % 24
      );
      let m = Math.floor(((new Date().getTime() - value) / 1000 / 60) % 60);
      if (y == py) {
        const date = new Date(value);
        comTime = formatDate(date, "M月d日 hh:mm");
      } else if (y != py && d > 0) {
        const date = new Date(value);
        comTime = formatDate(date, "yyyy年M月d日");
      } else if (h > 0) {
        const date = new Date(value);
        comTime = formatDate(date, "hh:mm");
      } else {
        comTime = m + "分钟前";
      }
      return comTime;
    },
  },
  data() {
    return {
      // #话题#
      topic: [],
      mas: "",
      // 分享单曲
      song: {},
      showSong: false,
      pics: [],
      showPic: false,
      showBigPic: false,
      current: 0,
      // 分享专辑
      album: {},
      showAlbum: false,
      // 分享歌手
      artist: {},
      showArtist: false,
      // 分享电台
      program: {},
      showProgram: false,
      // 分享MV
      mv: {},
      showMv: false,
      mvPlay: false,
      // 发布视频
      video: {},
      showVideo: false,
      videoPlay: false,
      url: "",
      brs: [],
      r: 1080,
      // 视频时长
      dt: 0,
      // 分享歌单
      playlist: {},
      showPlaylist: false,
      // 显示动态管理
      showManage: false,
      openManage: false,
      // 提示
      showDelTip: false,
      showSmallTip: false,
      smallTipMsg: "操作提示",
    };
  },
  mounted() {
    this.showManage =
      this.item.user.userId == this.$store.state.profile.userId ? true : false;
    let that = this;
    this.getMsg();
    this.$refs.eventText.onclick = function (ev) {
      var ev = ev || window.event;
      var target = ev.target || ev.srcElement;
      if (target.className == "event-user") {
        let key = target.innerText.slice(1);
        that.getUser(key);
      }
    };
    if (this.item.type == 18) {
      // 分享单曲
      this.song = JSON.parse(this.item.json).song;
      this.showSong = true;
      // console.log(this.song);
    }
    if (this.item.type == 19) {
      // 分享专辑
      this.album = JSON.parse(this.item.json).album;
      this.showAlbum = true;
      // console.log(this.album);
    }
    if (this.item.type == 36) {
      // 分享歌手
      this.artist = JSON.parse(this.item.json).resource;
      this.showArtist = true;
    }
    if (this.item.type == 17) {
      // 分享电台
      this.program = JSON.parse(this.item.json).program;
      this.showProgram = true;
    }
    if (this.item.type == 21) {
      // 分享MV
      this.mv = JSON.parse(this.item.json).mv;
      this.getMvUrl(1080);
      this.getMvDetail();
      this.showMv = true;
    }
    if (this.item.type == 39) {
      // 发布视频
      this.video = JSON.parse(this.item.json).video;
      this.getVideoUrl(1080);
      this.getVideoDetail();
      this.showVideo = true;
    }
    if (this.item.type == 13) {
      // 分享歌单
      this.playlist = JSON.parse(this.item.json).playlist;
      // console.log(this.playlist);
      this.showPlaylist = true;
    }
    if (this.item.type == 56) {
      // 分享歌单
      console.log("分享网页，还没写");
      // this.playlist = JSON.parse(this.item.json).playlist;
      // console.log(this.playlist);
      // this.showPlaylist = true;
    }
    this.pics = this.item.pics;
    if (this.pics.length > 0) {
      this.showPic = true;
    }
  },
  methods: {
    sureDel() {
      this.axios({
        url: "/event/del?evId=" + this.item.id,
      })
        .then((res) => {
          console.log(res);
          this.smallTipMsg = "删除动态成功！";
          this.showSmallTip = true;
          this.showDelTip = false;
          setTimeout(() => {
            this.showSmallTip = false;
          }, 1000);
          this.$emit("reloadEvent");
        })
        .catch((err) => {
          console.log(err);
          this.smallTipMsg = "删除动态失败！";
          this.showSmallTip = true;
          this.showDelTip = false;
          setTimeout(() => {
            this.showSmallTip = false;
          }, 1000);
        });
    },
    clickDel() {
      this.showDelTip = true;
      this.openManage = false;
    },
    clickPic(index) {
      // 点击哪个图片就放大哪个
      this.current = index;
      this.showBigPic = true;
    },
    clickAlbum(id) {
      this.playAlbumDetail(id);
    },
    clickPlaylist(id) {
      this.playPlaylistDetail(id);
    },
    playPlaylist(id) {
      this.axios({
        /* 歌曲列表接口地址 */
        url: "/playlist/track/all?id=" + id,
      })
        .then((res) => {
          if (res.data.songs.length != 0) {
            var newItem = [];
            res.data.songs.forEach((item) => {
              newItem[newItem.length] = {
                id: item.id,
                name: item.name,
                ar: item.ar,
                al: item.al,
                mv: item.mv,
                dt: item.dt,
                fee: item.fee,
              };
            });
            this.playSongs(newItem, true);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    playAlbum(id) {
      this.axios({
        /* 歌曲列表接口地址 */
        url: "/album?id=" + id,
      })
        .then((res) => {
          if (res.data.songs.length != 0) {
            var newItem = [];
            res.data.songs.forEach((item) => {
              newItem[newItem.length] = {
                id: item.id,
                name: item.name,
                ar: item.ar,
                al: item.al,
                mv: item.mv,
                dt: item.dt,
                fee: item.fee,
              };
            });
            this.playSongs(newItem, true);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clickMv(id) {
      this.playMv(id);
    },
    clickVideo(id) {
      this.playVideo(id);
    },
    clickProgram() {
      console.log("播放单台，还没写");
    },
    clickPlay(item) {
      var newItem = {
        id: item.id,
        name: item.name,
        ar: item.artists,
        al: item.album,
        mv: item.mvid,
        dt: item.duration,
        fee: item.fee,
      };
      this.playSongs(newItem);
    },
    clickSong(id) {
      this.playSong(id);
    },
    clickArtist(id) {
      this.playArtistDetail(id);
    },
    clickUser(id) {
      this.playUserDetail(id);
    },
    getMvUrl(clickR) {
      this.axios({
        /* mv播放地址接口地址 */
        url: "/mv/url?id=" + this.mv.id + "&r=" + clickR,
      })
        .then((res) => {
          this.url = res.data.data.url;
          this.r = res.data.data.r;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getVideoUrl(clickR) {
      this.axios({
        /* video播放地址接口地址 */
        url: "/video/url?id=" + this.video.videoId + "&r=" + clickR,
      })
        .then((res) => {
          this.url = res.data.urls[0].url;
          this.r = res.data.urls[0].r;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getVideoDetail() {
      this.axios({
        // video详情接口地址
        url: "/video/detail?id=" + this.video.videoId,
      })
        .then((res) => {
          this.brs = res.data.data.resolutions;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getMvDetail() {
      this.axios({
        // mv详情接口地址
        url: "/mv/detail?mvid=" + this.mv.id,
      })
        .then((res) => {
          this.brs = res.data.data.brs;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getUser(key) {
      console.log(key);
      this.axios({
        url: "/cloudsearch?type=1002&keywords=" + key,
      })
        .then((res) => {
          this.playUserDetail(res.data.result.userprofiles[0].userId);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getMsg() {
      // 匹配#话题#
      let reg1 = /\#([\u4e00-\u9fa5a-zA-Z0-9]+)\#/g;
      // 匹配网址,结果要去掉最后四位（<br>）,因为先将 \n 替换成<br>了
      let reg2 = /(http|ftp|https)(.+?)\<br\>/g;
      // 匹配链接直接放在最后面
      let reg5 = /(http|ftp|https).+/g;
      // 匹配@的用户
      let reg3 = /\@.+?[ ]/g;
      // 匹配换行符
      let reg4 = /\n/g;
      this.msg = JSON.parse(this.item.json).msg.replace(reg4, "<br>");
      let result1 = this.msg.match(reg1);
      if (result1) {
        result1.forEach((item) => {
          let ab =
            '<a href="javascript:;" class="event-topic">' + item + "</a>";
          this.msg = this.msg.replace(item, ab);
        });
      }
      let result2 = this.msg.match(reg2) || this.msg.match(reg5);
      if (result2) {
        result2.forEach((item) => {
          item = item.replace("<br>", "");
          // console.log(item);
          let sb =
            '<br><a href="' +
            item +
            '" target="_blank" class="event-link"><i class="iconfont">&#xec4f;</i>网页链接</a>';
          this.msg = this.msg.replace(item, sb);
        });
      }
      let result3 = this.msg.match(reg3);
      if (result3) {
        result3.forEach((item) => {
          let ub = '<a href="javascript:;" class="event-user">' + item + "</a>";
          this.msg = this.msg.replace(item, ub);
        });
      }
      this.$refs.eventText.innerHTML = this.msg;
    },
  },
};
</script>

<style>
.com-event {
  position: relative;
  width: 100%;
}
.com-event-hd {
  width: 100%;
  height: 50px;
}
.com-event-left {
  float: left;
  width: 50px;
  height: 50px;
}
.com-event-left a {
  display: block;
  width: 50px;
  height: 50px;
}
.com-event-left .com-event-hd-pic {
  width: 50px;
  height: 50px;
}
.com-event-hd-main {
  position: relative;
  margin-left: 60px;
  height: 50px;
}
.com-event-user {
  height: 30px;
  line-height: 30px;
}
.com-event-user-name {
  display: inline-block;
  margin: 0;
  font-weight: 400;
  font-size: 16px;
}
.com-event-user-name a {
  color: var(--color-theme);
}
.com-event-user-name a:hover {
  text-decoration: underline;
}
.com-event-user-icon {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  width: 15px;
  height: 15px;
}
.com-event-user-icon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
}
.com-event-type {
  margin-left: 5px;
  font-size: 14px;
  color: #333;
}
.com-event-time {
  font-size: 14px;
  color: #999;
}
/* com-event-main */
.com-event-main {
  position: relative;
  margin-left: 60px;
}
.com-event-main-text {
  margin-top: 10px;
  line-height: 24px;
  font-size: 14px;
}
.event-topic,
.event-user {
  color: var(--color-theme);
}
.event-topic:hover,
.event-user:hover {
  text-decoration: underline;
}
.event-link {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  height: 24px;
  line-height: 21px;
  font-size: 12px;
  vertical-align: middle;
  overflow: hidden;
  color: var(--color-theme);
  border: 1px solid #e2e2e2;
  background-color: #f9f9f9;
}
.event-link:hover {
  border-color: #d0d0d0;
  background-color: #f2f2f2;
}
.event-link .iconfont {
  font-size: 14px;
}
/* com-event-main-song */
.com-event-main-song,
.com-event-main-artist {
  position: relative;
  padding: 10px;
  margin: 5px 0;
  width: 100%;
  height: 60px;
  overflow: hidden;
  background-color: var(--color-theme-light-4);
  border-radius: 10px;
}
.cem-song-left,
.cem-artist-left {
  position: relative;
  float: left;
  width: 40px;
  height: 40px;
}
.cem-song-left a,
.cem-artist-left a {
  display: block;
  height: 40px;
  width: 40px;
}
.cem-song-pic,
.cem-artist-pic {
  width: 40px;
  height: 40px;
}
.cem-song-cover-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-image: url(https://y.qq.com/ryqq/static/media/cover_play.56974e6f.png?max_age=2592000);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  z-index: 1;
}
.cem-song-main,
.cem-artist-main {
  margin-left: 50px;
  height: 40px;
  width: 690px;
}
.cem-song-main h4 {
  margin: 0;
  height: 22px;
  line-height: 22px;
  font-weight: 400;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.cem-song-main .cem-song-name a {
  font-size: 14px;
}
.cem-song-main .cem-song-artist a {
  font-size: 12px;
  color: #999;
}
.cem-song-main a:hover,
.cem-artist-main a:hover {
  text-decoration: underline;
}
.cem-artist-main h4 {
  margin: 0;
  height: 40px;
  line-height: 40px;
  font-weight: 400;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.cem-artist-name-trans {
  margin-left: 5px;
  font-size: 14px;
  color: #999;
}
.cem-artist-main h4 a {
  font-size: 14px;
}
.cem-program-category {
  padding: 0 2px 0 3px;
  margin-right: 6px;
  font-size: 12px;
  border: 1px solid #e03f40;
  color: #e03f40;
}
/* com-event-main-count */
.com-event-main-count {
  margin: 10px 0 0;
  height: 16px;
  text-align: right;
}
.com-event-main-count a {
  font-size: 12px;
  color: var(--color-theme);
}
.com-event-main-count a:hover {
  text-decoration: underline;
}
.com-event-main-count .line {
  margin: 0 6px;
  font-size: 12px;
  color: var(--color-theme);
}
/* com-event-main-mv */
.com-event-main-mv {
  position: relative;
  margin: 10px 0;
}
.cem-mv-show {
  position: relative;
  width: 560px;
  overflow: hidden;
}
.cem-mv-show-hd {
  position: absolute;
  top: 15px;
  padding-left: 15px;
  width: 100%;
  font-size: 14px;
  color: #eee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cem-mv-show-hd .iconfont {
  margin-right: 10px;
  font-size: 16px;
}
.cem-mv-artists {
  color: #999;
}
.cem-mv-artists a {
  color: #999;
}
.cem-mv-artists a:hover {
  text-decoration: underline;
}
.cem-mv-playcount {
  position: absolute;
  left: 15px;
  bottom: 15px;
  font-size: 14px;
  color: #999;
}
.cem-mv-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-image: url(https://y.qq.com/ryqq/static/media/cover_play.56974e6f.png?max_age=2592000);
  background-size: 60px 60px;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 1;
}
.cem-mv-show img {
  width: 100%;
}
.cem-mv-box {
  width: 100%;
}
.cem-mv-box-hd {
  height: 30px;
  line-height: 24px;
  font-size: 12px;
}
.cem-mv-box-hd .iconfont {
  margin-right: 5px;
  color: #999;
}
.cem-mv-box .line {
  margin: 0 6px;
  font-size: 12px;
  color: #999;
}
.cem-mv-box-put {
  color: #333;
}
.cem-mv-link {
  margin-right: 5px;
  color: #666;
}
.cem-mv-artist {
  color: #999;
}
.cem-mv-box-put:hover,
.cem-mv-link:hover,
.cem-mv-artist:hover {
  text-decoration: underline;
  cursor: pointer;
}
/* event-video */
.cem-video-creator {
  position: absolute;
  top: 40px;
  left: 15px;
  color: #999;
  font-size: 14px;
}
.cem-video-creator a {
  color: #999;
}
.cem-video-creator a:hover {
  text-decoration: underline;
}
.cem-video-time {
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 14px;
  color: #999;
}
/* cem-playlist */
.cem-playlist-tab {
  padding: 0 2px 0 3px;
  margin-right: 6px;
  font-size: 12px;
  border: 1px solid #e03f40;
  color: #e03f40;
}
.cem-playlist-artist {
  font-size: 12px !important;
  color: #999;
}
.cem-playlist-artist a {
  font-size: 12px;
  color: #999;
}
/* com-event-main-pic */
.com-event-main-pic {
  position: relative;
  margin: 10px 0;
}
.cem-pic-show {
  position: relative;
  width: 560px;
}
.cem-pic-list {
  width: 100%;
  margin-right: -20px;
}
.cem-pic-item {
  float: left;
  padding: 0 5px 5px 0;
  max-height: 1000px;
  overflow: hidden;
  cursor: url(../../assets/images/big.png), pointer;
}
.cem-pic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cem-pic-item-1,
.cem-pic-item-1 img {
  width: 560px;
}
.cem-pic-item-2 {
  width: 280px;
  height: 280px;
}
.cem-pic-item-3 {
  width: 186.6px;
  height: 186.6px;
}
/* cem-pic-box */
.cem-pic-box {
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  background-color: var(--color-theme-light-4);
}
.cem-pic-box-hd {
  height: 30px;
  line-height: 24px;
  font-size: 12px;
}
.cem-pic-box-hd .iconfont {
  margin-right: 5px;
  color: #999;
}
.cem-pic-box .line {
  margin: 0 6px;
  font-size: 12px;
  color: #999;
}
.cem-pic-oig,
.cem-pic-down,
.cem-pic-box-put {
  color: #666;
}
.cem-pic-box-put:hover,
.cem-pic-oig:hover,
.cem-pic-down:hover {
  text-decoration: underline;
  cursor: pointer;
}
/* com-event-manage */
.com-event-manage {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.manage-list {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 100px;
  font-size: 14px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.manage-item {
  padding-left: 25px;
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.manage-item .iconfont {
  position: absolute;
  left: 4px;
  font-size: 14px;
  color: #999;
}
.manage-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
/* my-del-tip */
.delTip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1006;
}
.my-del-tip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 500px;
  background-color: var(--color-theme-light-5);
  border-radius: 10px;
  box-shadow: 0 0 10px 3px #999;
  overflow: hidden;
}
.my-del-hd {
  padding: 0 10px 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  color: #f2f2f2;
  background-color: var(--color-theme);
  cursor: move;
}
.my-del-hd .close {
  position: absolute;
  right: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 0;
  cursor: pointer;
}
.my-del-hd .close .iconfont {
  font-size: 16px;
}
.my-del-bd {
  position: relative;
  width: 100%;
  height: 160px;
  text-align: center;
}
.my-del-bd .my-del-cont {
  position: relative;
  height: 110px;
  line-height: 30px;
  font-size: 16px;
  color: #000;
}
.my-del-bd .my-del-cont p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: break-word;
}

.my-del-bd .my-del-btn {
  display: flex;
  justify-content: space-evenly;
}
</style>